import React from 'react'
import Counter from './Counter'

export default class ControlPanel extends React.Component {
  constructor (props) {
    super(props)
    this.onCounterUpdate = this.onCounterUpdate.bind(this)
    this.initValues = [0, 10, 20]
    const initSum = this.initValues.reduce((a, b) => a + b, 0)
    this.state = {sum: initSum}
  }

  onCounterUpdate (newVal, perVal) {
    const valChange = newVal - perVal
    this.setState({sum: this.state.sum + valChange})
  }

  render () {
    return (
      <div style={{margin: '20px'}}>
        {/*{()=>{*/}
        {/*return this.initValues.map((val,index)=>{*/}
        {/*<Counter onUpdate={this.onCounterUpdate} caption={'First'} initValue={this.initValues[index]}/>*/}
        {/*})*/}
        {/*}}*/}
        <Counter onUpdate={this.onCounterUpdate} caption={'First'}/>
        <Counter onUpdate={this.onCounterUpdate} caption={'Second'} initValue={this.initValues[1]}/>
        <Counter onUpdate={this.onCounterUpdate} caption={'Third'} initValue={this.initValues[2]}/>
        <hr/>
        <div>Total Count:{this.state.sum}</div>
      </div>
    )
  }
}
